<template>
    <div style="margin-top: 60px;margin-left:330px;width: 300px;height: 500px;border: 0px solid red;" >
      <!-- 表单 -->
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <!-- ID 表单项 -->
        <el-form-item label="ID">
          <el-input v-model="ruleForm.id" readonly></el-input>
        </el-form-item>
        <!-- 时间点 表单项 -->
        <el-form-item label="时间点" prop="datePoint">
          <el-input v-model="ruleForm.datePoint"></el-input>
        </el-form-item>
        <!-- 标题 表单项 -->
        <el-form-item label="标题" prop="title">
          <el-input v-model="ruleForm.title"></el-input>
        </el-form-item>
        <!-- 内容 表单项 -->
        <el-form-item label="内容" prop="content">
          <el-input v-model="ruleForm.content"></el-input>
        </el-form-item>
        <!-- 操作按钮 -->
        <el-form-item>
          <el-button type="success" @click="submitForm('ruleForm')">立即修改</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        category: null,
        ruleForm: {
          datePoint: '',
          title: '',
          content: '',
          genealogyId: 0
        },
        dormitoryList: '',
        rules: {
          datePoint: [
            { required: true, message: '请输入时间点', trigger: 'blur' }
          ],
          title: [
            { required: true, message: '请输入标题', trigger: 'blur' }
          ],
          content: [
            { required: true, message: '请输入内容', trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      // 提交表单
      submitForm(formName) {
        const _this = this
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$http.put('http://localhost:8081/event/update', _this.ruleForm).then(function (resp) {
              if (resp.data.code == 0) {
                _this.$alert('修改成功', '', {
                  confirmButtonText: '确定',
                  callback: () => {
                    _this.$router.push('/eventManager?id=' + _this.ruleForm.genealogyId)
                  }
                });
              }
            })
          }
        });
      },
      // 重置表单
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    },
    created() {
      const _this = this
      // 初始化加载表单数据
      this.$http.get('http://localhost:8081/event/findById/' + _this.$route.query.id).then(function (resp) {
        _this.ruleForm = resp.data.data
      })
    }
  }
  </script>